<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>模拟手机画板</title>
    <link rel="stylesheet" href="../CSS/paint.css" />
    <link rel="stylesheet" href="../CSS//navbar.css" />
  </head>
  <body>
    <!-- 画布 -->
    <canvas id="canvas" width="500" height="500"></canvas>
    <!-- 导航栏 -->
    <div class="navbar">
      <input type="checkbox" />
      <span class="navBtn"></span>
      <span class="navBtn"></span>
      <div class="content">
        <img
          src="../img/eraser.png"
          class="eraserPicture"
          id="eraser"
          title="橡皮"
        />
        <img src="../img/brush.png" class="colorPicture" title="颜色" />
        <img src="../img/changepen.png" class="sizePicture" title="画笔大小" />
        <!-- 画笔风格效果 -->
        <ul>
          <img
            src="../img/墨迹.png"
            title="高斯模糊"
            class="blurPicture"
            id="blur"
          />
          <img
            src="../img/色卡.png"
            title="深色效果"
            class="deepPicture"
            id="deep"
          />
          <img
            src="../img/颜色通道.png"
            title="复古色"
            class="oldPicture"
            id="old"
          />
        </ul>
        <img src="../img/undo.png" class="undoPicture" id="undo" title="撤回" />
        <img src="../img/redo.png" class="redoPicture" id="redo" title="恢复" />
        <img
          src="../img/六边形.png"
          title="形状"
          class="formPicture"
          id="form"
        />
      </div>
    </div>
    <!-- 画笔 -->
    <div class="box">
      <img src="../img/pen.png" alt="" class="paint active" id="paint" />
    </div>

    <!-- 橡皮 -->
    <div class="eraserBox" id="eraserBox">
      <ul id="erasers">
        <li class="small eraserActive"></li>
        <li class="mid"></li>
        <li class="big"></li>
      </ul>
    </div>
    <div></div>
    <!-- 颜色 -->
    <div class="colorsBox" id="colorsBox">
      <ul id="colors">
        <li class="black" color="#474747"></li>
        <li class="green" color="#255f63"></li>
        <li class="blue liActive" color="cadetblue"></li>
        <li class="pur" color="#a5678e"></li>
        <li class="red" color="#db7b65"></li>
        <li class="yellow" color="#ecb865"></li>
      </ul>
    </div>

    <!-- 笔迹大小 -->
    <div class="sizeBox" id="sizeBox">
      <ul id="sizes">
        <li class="small"></li>
        <li class="normal"></li>
        <li class="strong sizeActive"></li>
        <li class="XXL"></li>
      </ul>
    </div>

    <!-- 清空屏幕 -->
    <div class="footer">
      <img src="../img/bin.png" title="清空" id="bin" class="bin" />
      <!-- 下载图片 -->
      <img
        src="../img/picture.png"
        title="保存图片"
        id="download"
        class="download"
      />
    </div>
  </body>
  <script src="../JS/panit.js"></script>
  <script src="../JS//mouse.js"></script>
</html>
